<script setup lang='ts'>
  import { reactive, onMounted } from 'vue';
  import request from '@/api/index';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  import 'swiper/css/pagination';
  const $emit = defineEmits(['swiperChange'])
  const action = reactive({
    rightsIndex:0,
    swiperList:[] as Array<any>
  })
  const onSlideChange = (key:any = {}) => {
    const { activeIndex=0 } = key
    const query = action.swiperList[activeIndex] || { price:0, name:'', pool:[] }
    $emit('swiperChange',query)
  };
  const getList = async()=>{
    const res = await request.getcolor_pool()
    const { data=[] } = res
    action.swiperList = data
    onSlideChange({activeIndex:0})
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="swiperBox">
    <swiper
      slidesPerView="auto"
      :centeredSlides="true"
      :spaceBetween="16"
      :initialSlide="0"
      class="mySwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="item in action.swiperList">
        <div class="image">
          <img :src="item.img">
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang='scss' scoped>
  .swiperBox {
    height: 216px;
    background: url('@/assets/images/backimg1.png') top / 355px 216px no-repeat;
  }
  .mySwiper {
    width: 100%;
    height: 160px;
    .swiper-slide {
      position: relative;
      width: 160px;
      height: 160px;
      .image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 80px;
        height: 80px;
        transition: width .5s, height .5s,;
      }
    }
    .swiper-slide-next {
      .image {
        left: 0;
      }
    }
    .swiper-slide-active {
      .image {
        left: 50%;
        transform: translate(-50%,-50%);
        width: 160px;
        height: 160px;
      }
    }
    .swiper-slide-prev {
      .image {
        right: 0;
      }
    }
  }
</style>